<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-19 15:45:40
-->
<!-- 新增好友 -->
<template>
  <div class="apption">
    <!-- 标题 -->
    <div class="pageTitle">经销商管理</div>
    <div class="apptionCont">
      <div class="organLeft">
        <div class="title"><span>织架构管理</span><el-icon style="cursor: pointer;" @click="isEdit ? isEdit=false : isEdit=true"><EditPen /></el-icon></div>
        <div class="box">
          <div v-for="list,index of orgData" :key="index" class="list" :class="orgProp.id==list.id?'active':''" @click="leftListClick(list)">
            <span>{{ list.name }}</span>
            <span>
              <el-icon v-if="isEdit" @click.stop="deleteOrgFun(list)" style="margin-right: 10px;"><DeleteFilled /></el-icon>
              <el-icon v-if="isEdit" @click.stop="editOrgFun(list)"><EditPen /></el-icon>
              <el-icon v-if="!isEdit"><ArrowRight /></el-icon>
            </span>
          </div>
          <div class="organLeft_but" @click="addOrgFun()"><span>添加新的部门</span><el-icon><ArrowRight /></el-icon></div>
        </div>
      </div>
      <div class="organRight">
        <div class="title">
          <span>成员管理</span>
          <div @click="addAdmin()"><el-icon><CirclePlus /></el-icon>新增成员</div>
        </div>
        <div class="tableClass">
          <el-table :data="tableData" v-loading="loading" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column label="角色">
              <template #default="scope">
                {{ scope.row.auth_name }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="scope">
                <el-button type="danger" size="small" @click="adminDeleteClick(scope.row)">删除</el-button>
                <el-button type="primary" size="small" @click="adminEditClick(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="timedPagination">
          <el-pagination
            v-model:current-page="adminInitProp.page"
            v-model:page-size="adminInitProp.limit"
            :total="adminInitProp.total"
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增or编辑组织 -->
    <el-dialog
      v-model="dialogVisible"
      width="400"
      :before-close="dialogClose"
      :title="orgProp.id?'编辑':'新增'+'组织架构'"
    >
      <div class="dialogContent">
        <el-form :model="orgProp" label-width="auto">
          <el-form-item label="部门名称:">
            <el-input v-model="orgProp.name" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item label="部门职能:">
            <el-input v-model="orgProp.remark" type="textarea" placeholder="请输入部门职能" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="saveFun()">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增or编辑组织成员 -->
    <el-dialog
      v-model="adminDialogVisible"
      width="500"
      :before-close="dialogClose"
      :title="adminProp.id?'编辑':'新增'+'成员'"
      top="10vh"
    >
      <div class="dialogContent">
        <el-form :model="adminProp" label-width="auto">
          <el-form-item label="员工名称:">
            <el-input v-model="adminProp.name" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item label="电话号码:">
            <el-input v-model="adminProp.phone" placeholder="请输入电话号码" maxlength="11" />
          </el-form-item>
          <el-form-item label="账号密码:">
            <el-input v-model="adminProp.password" placeholder="请输入账号密码" />
          </el-form-item>
          <el-form-item label="所属部门:">
            <el-select v-model="adminProp.branch_id" clearable placeholder="请选择">
              <el-option v-for="list,index of orgData" :key="index" :label="list.name" :value="list.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="成员角色:">
            <!-- <el-input v-model="adminProp.auth_ids" type="textarea" placeholder="请输入成员角色" /> -->
            <el-select v-model="adminProp.auth_ids" clearable placeholder="请选择">
              <el-option v-for="list,index of roleData" :key="index" :label="list.title" :value="list.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="成员头像:">
            <elUploadOptionMultiple v-if="adminDialogVisible" :fileUploadList="adminProp.head_img" :limit="1" @getImagesFun="getImagesFun" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="adminSaveFun()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { useChatInfoStore, useJobIDStore } from '@/store/index.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from "@/api/api.js"
import elUploadOptionMultiple from '@/components/elUploadOptionMultiple.vue';
import moment from 'moment'
let prop = ref({
  status: '',
  title: '',
  create_time: '',
  create_admin: '',
  page: 1,
  pageSize: 10,
  total: ''
})
let loading = ref(false)
let orgData = ref([])
let roleData = ref([])
let isEdit = ref(false)
// 查询商品
function init() {
  loading.value = true
  postApi('/system.branch/index').then(res => {
    loading.value = false
    orgData.value = res.data
    // orgProp.value.id = res.data[0].id
    adminInit()
  }).catch(err => {
    loading.value = false
  })
}
// 新增组织
let dialogVisible = ref(false)
let orgProp = ref({
  id: '',
  name: '',
  remark: ''
})
function addOrgFun() {
  orgProp.value = {
    id: '',
    name: '',
    remark: ''
  }
  dialogVisible.value = true
}
function editOrgFun(row) {
  dialogVisible.value = true
  orgProp.value = {
    id: row.id,
    name: row.name,
    remark: row.remark
  }
}
function deleteOrgFun(row) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/system.branch/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        init()
      }
    })
  })
}
// 保存
function saveFun() {
  loading.value = true
  if(orgProp.value.id){
    let obj = {
      id: orgProp.value.id,
      name: orgProp.value.name,
      remark: orgProp.value.remark
    }
    console.log(obj)
    postApi('/system.branch/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        init()
        dialogVisible.value = false
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      name: orgProp.value.name,
      remark: orgProp.value.remark
    }
    postApi('/system.branch/add', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        init()
        dialogVisible.value = false
      }
    }).catch(err => {
      loading.value = false
    })
  }
}
function leftListClick(row) {
  orgProp.value.id = row.id
  adminInit()
}

// 成员管理
let adminDialogVisible = ref(false)
let adminProp = ref({
  id: '',
  name: '',
  phone: '',
  password: '',
  branch_id: '',
  auth_ids: '',
  head_img: []
})
let adminInitProp=ref({
  page: 1,
  limit: 10,
  total: 0
})
let tableData = ref([])
function adminInit() {
  loading.value = true
  let obj ={
    branch_id: orgProp.value.id,
    page: adminInitProp.value.page,
    limit: adminInitProp.value.limit
  }
  postApi('/system.admin/index', obj).then(res => {
    loading.value = false
    tableData.value = res.data
    adminInitProp.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function addAdmin() {
  adminDialogVisible.value = true
  adminProp.value = {
    id: '',
    name: '',
    phone: '',
    password: '',
    branch_id: '',
    auth_ids: '',
    head_img: []
  }
}
function handleCurrentChange(val){
  adminInitProp.value.page = val
  adminInit()
}
function adminEditClick(row) {
  adminDialogVisible.value = true
  let tempimage = ''
  if(row.head_img){
    tempimage = [{
      url: row.head_img
    }]
  }
  adminProp.value = {
    id: row.id,
    name: row.name,
    phone: row.phone,
    password: row.password,
    branch_id: row.branch_id,
    auth_ids: Number(row.auth_ids),
    head_img: tempimage
  }
}
function adminDeleteClick(row) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/system.admin/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        adminInit()
      }
    })
  })
}
// 保存
function adminSaveFun() {
  loading.value = true
  let tempImage = ''
  if(adminProp.value.head_img.length > 0){
    tempImage = adminProp.value.head_img[0].url
  }
  if(adminProp.value.id){
    let obj = {
      id: adminProp.value.id,
      name: adminProp.value.name,
      phone: adminProp.value.phone,
      password: adminProp.value.password,
      branch_id: adminProp.value.branch_id,
      auth_ids: adminProp.value.auth_ids,
      head_img: tempImage
    }
    console.log(obj)
    postApi('/system.admin/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        init()
        adminDialogVisible.value = false
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      name: adminProp.value.name,
      phone: adminProp.value.phone,
      password: adminProp.value.password,
      branch_id: adminProp.value.branch_id,
      auth_ids: adminProp.value.auth_ids,
      head_img: tempImage
    }
    postApi('/system.admin/add', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        adminInit()
        adminDialogVisible.value = false
      }
    }).catch(err => {
      loading.value = false
    })
  }
}
// 上传图片回传函数
function getImagesFun(row) {
  console.log(row)
  adminProp.value.head_img = row
}
// 关闭弹框
function dialogClose() {
  dialogVisible.value = false
  adminDialogVisible.value = false
}

onMounted(()=>{
  init()
  postApi('/system.auth/index').then(res => {
    roleData.value = res.data
  }).catch(err => {
  })
})
</script>

<style lang="scss" scoped>
.apption{
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  .apptionCont{
    display: flex;
    justify-content: space-between;
    height: calc(100% - 30px);
  }
  .organLeft{
    padding: 20px 15px;
    width: 208px;
    height: 100%;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    overflow: auto;
    box-sizing: border-box;
    .title{
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #000000;
    }
    .list{
      cursor: pointer;
      margin-bottom: 10px;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 34px;
      background: #F8F8F8;
      border-radius: 4px 4px 4px 4px;
    }
    .active{
      background: #F8F8F8;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #000000;
    }
    .organLeft_but{
      cursor: pointer;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 34px;
      background: #F8F8F8;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .organRight{
    padding: 18px;
    width: calc(100% - 220px);
    height: 100%;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    overflow: auto;
    box-sizing: border-box;
    .title{
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #000000;
    }
  }
  .pageTitle{
    line-height: 20px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
  .tableClass{
    margin-bottom: 20px;
  }
}
.dialogContent{
}
</style>
